define(['jquery', 'cookie'], ($) => {
    $('footer').load('/includes/footer.html')
    $('header').load('/includes/header.html', () => {
        class header {
            constructor() {
                this.headerChange()
            }
            headerChange() {
                let flag = 1
                const drops = $('header .header-main nav ul .drop')
                const dropDowns = $('header .drop-down .drop-down-main')
                $('header .header-main nav ul').on('mouseover', e => {
                    if ($(e.target).parent().is('.drop')) {
                        $('header .drop-down').addClass('drop-down-show')
                        $('header').addClass('toggle')
                        $('.header-cover').addClass('header-cover-show')
                    } else if ($(e.target).parent().is('.no-drop')) {
                        $('header .drop-down').removeClass('drop-down-show')
                        $('header .drop-down').removeClass('drop-down-appDownLoad-show')
                        $('header').removeClass('toggle')
                        $('.header-cover').removeClass('header-cover-show')
                        $('header .drop-down .app-download').removeClass('app-download-show')
                    } else if ($(e.target).parent().is('.appDownLoad-drop')) {
                        $('header .drop-down').addClass('drop-down-appDownLoad-show')
                        $('header').addClass('toggle')
                        $('.header-cover').addClass('header-cover-show')
                        $('header .drop-down .app-download').addClass('app-download-show')
                        for (let j = 0; j < drops.length; j++) {
                            dropDowns[j].classList.remove('drop-down-main-show')
                        }
                        flag = 0
                    }
                })
                for (let i = 0; i < drops.length; i++) {
                    drops[i].onmouseover = function () {
                        for (let j = 0; j < drops.length; j++) {
                            dropDowns[j].classList.remove('drop-down-main-show')
                        }
                        flag = 1
                        dropDowns[i].classList.add('drop-down-main-show')
                    }
                }
                $('header .drop-down').on('mouseover', e => {
                    if (flag == 0) {
                        $('header .drop-down .app-download').addClass('app-download-show')
                        $('header .drop-down').addClass('drop-down-appDownLoad-show')
                    } else {
                        $('header .drop-down').addClass('drop-down-show')
                        //$('header .drop-down .drop-down-main').classList.add('drop-down-main-show')
                    }
                    $('header .drop-down .drop-down-main-show ul').toggleClass('ul-on')
                        
                    $('header').addClass('toggle')
                    $('.header-cover').addClass('header-cover-show')
                })
                $('header .drop-down').on('mouseout', e => {
                    $('header .drop-down').removeClass('drop-down-show')
                    $('header .drop-down').removeClass('drop-down-appDownLoad-show')
                    $('header').removeClass('toggle')
                    $('.header-cover').removeClass('header-cover-show')
                    $('header .drop-down .app-download').removeClass('app-download-show')
                    $('header .drop-down .drop-down-main-show ul').toggleClass('ul-on')
                })
            }
        }
        new header()
        $.cookie.json = true
        const total = ($.cookie('cart') || []).reduce((res, curr) => res + curr.amount, 0)
        $('.header-main .cart em').html(total)
    })
})